<template>
	<div class="card rdsp-card-view" data-page="electricalFire_org">
		<div class="card-content rank-content card-content-padding">
			<div class="rdsp-card-title">
				<div class="left-title">电气火灾监测</div>
			<div style="height: 60px;margin-top: 20px;width: 100%" class="detailInfoorg">
			 <a href="#" @click="goToMoreDector(0)" class="item-link item-content" data-view=".view-main"><div class="detailInfo" >
                <div style="font-size: 19px;color:#4B96F7" id="jiancenum">0</div>
                <div class="desdeInfosize">检测总数</div>
             </div></a>
             <a href="#" @click="goToMoreDector(1)" class="item-link item-content" data-view=".view-main"><div class="detailInfo" >
                <div style="font-size: 19px;color:#CE6666" id="baojingnum">0</div>
                <div class="desdeInfosize">报警</div>
             </div></a>
             <a href="#" @click="goToMoreDector(2)" class="item-link item-content" data-view=".view-main"><div class="detailInfo" >
               <div style="font-size: 19px;color:#ECB112" id="guzhangnum">0</div>
                <div class="desdeInfosize" >故障</div>
             </div></a>
             <a href="#" @click="goToMoreDector(5)" class="item-link item-content" data-view=".view-main"><div  class="detailInfo" >
             <div style="font-size: 19px;color:#77BE07" id="zhengchangnum">0</div>
                <div class="desdeInfosize" >正常</div>
             </div></a>
             </div>
			</div>
			
			
			<div class="card-electrical-chat" style="border-top:1px solid rgba(225,225,225,1);" id="card-electrical-chat-pic">
                    <div class="card-electrical-chat-left rdsp-chat-box">
                        <div id="electricity_chart"></div>
                        <div id="electricity_gange">
                            <span class="min" id="one_dlinfo">10</span>
                             ~ 
                            <span class="max" id="two_dlinfo">20</span>
                            <em>mA</em>
                        </div>
                        <div id="electricity-title" class="kuadufont">剩余电流跨度</div>
                    </div>
                    <div class="card-electrical-chat-right rdsp-chat-box" >
                        <div id="temperature_chart"></div>
                        <div id="temperature_gange">
                            <span class="min" id="one_wdinfo">0.01</span> 
                             ~ 
                            <span class="max" id="two_wdinfo">0.02</span>
                            <em>°C</em>
                        </div>
                        <div id="temperature-title" class="kuadufont">温度跨度</div>
                    </div>
                </div>


			<!-- <div class="every-type-chart-wrap" id="topChartContain">
				<div class="every-type-chart-wrap">
					<div class="decterHasAnalogChart-style" style="height:160px;" id="hasAnalogChart-clock-39"></div>
					  <div class="right-num" style="margin-bottom: 20px;margin-top:-20px;margin-right: -35px;">
					 <span style="color: #666666;font-size:20px; " class="numsize" id="one_dlnum">0</span><span style="color: #666666;font-size:20px; " class="numsize">~</span>
						<span style="color: #666666;font-size:20px; " class="numsize" id="two_dlnum">0.5mA</span>
					
						<span style="color: #666666;font-size:20px;" class="numsize" id="one_wdnum">1200</span><span style="color: #666666;font-size:20px;" >~</span><span
						style="color: #666666;font-size:20px; class="numsize" id="two_wdnum">2212°C</span> 
						<div>
						<div style="color:#666666;font-size: 13px;float: left;">剩余电流跨度</div>
						<div style="color:#666666;font-size: 13px;float: right;">温度跨度</div>
					   </div>
					</div>
				</div>
			</div> -->
		</div>
	</div>
</template>
<style scoped>
.card-electrical-chat{
	text-align: center;
}
.desdeInfosize{
	color:#999999;
	font-size: 11px; 
}
.detailInfoorg{
 text-align: center;
}
.detailInfoorg a{
	display: inline-block;
}
.detailInfo{
	
    width: 65px;
}

#electricity_chart{
	width:150px;
	height:150px;
}
#temperature_chart{
	width:150px;
	height:150px;
}
.kuadufont{
	color:#666666;
	font-size: 13px;
}
.num-min{	
	color: #666666;
	font-size: 20px;
}
.num-max{	
	color: #666666;
	font-size: 20px;
}
#electricity_chat{
    margin: 8px auto;
    width: 155px;
    height:155px;
}

#temperature_chat{
    margin: 8px auto;
    width: 155px;
    height:155px;
}


#temperature_gange,#electricity_gange{
     position: absolute;
    width: 100%;
    text-align: center;
    top: 42%;
    font-size:16px;
    color:rgba(102,102,102,1);
}
#temperature_gange em,#electricity_gange em{
	display: block;
    font-size: 14px; 
    font-style: normal;
}
#temperature_gange em{
    letter-spacing: 0;
}
#temperature-title,#electricity-title {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 13px;
    margin-bottom: -20px;
    bottom: 17%;
     color:rgba(102,102,102,1);
}
.rdsp-chat-box{
	display: inline-block;
	position: relative;
	width: 150px;
}
element.style {
	left: :12px;
}
.every-type-chart-wrap .right-num{
	right: :5%;
}


</style>
<script>
	return {
		data: function() {
			return {
				fcfCategoryId:0,
				fcfCategoryName:""
			}
		},
		methods: {
			goToMoreDector:function(status){
                var self = this;
                app.router.navigate("/moreDectorState/"+status+"/0/0/0/"+self.fcfCategoryId+"/"+self.fcfCategoryName+"/");
            },
			electricalFire_org: function() {
				var self = this;
				var id_org = "";
				if (single_Orgid == "") {
					id_org = userInfor.organizationIds;
				} else {
					id_org = single_Orgid;
				}
				$("#jiancenum").empty();
				$("#baojingnum").empty();
				$("#guzhangnum").empty();
				$("#zhengchangnum").empty();
			Dao.getFcfRealTimeStatusMultiCount({
					userName: userInfor.accountName,
					deviceId: appKeyObj.deviceId,
					fcfsType: 3,
					orgIds: id_org
				}, function(data) {					
					$("#jiancenum").html(data.count);
					$("#baojingnum").html(data.fireAlarmCount);
					$("#guzhangnum").html(data.faultAlarmCount);
					$("#zhengchangnum").html(data.normalCount);
				});

				$("#one_dlinfo").empty();
				$("#two_dlinfo").empty();
				$("#one_wdinfo").empty();
				$("#two_wdinfo").empty();
			Dao.getFireResMonitorInfo({
					userName: userInfor.accountName,
					deviceId: appKeyObj.deviceId,
					orgIds: id_org,
					resType: 3,
					queryType: 1
				}, function(data) {
                  if(data==null){
                    $("#card-electrical-chat-pic").empty();
                       $("#card-electrical-chat-pic").append(`<div><img  style="width: 283px;display:block" src="`+listNoDataPic()+`"></div>`);
                  }else{
                  	self.fcfCategoryId=data.categoryObject.fcFacilitiesCategoryId;
					self.fcfCategoryName=data.categoryObject.fcFacilitiesCategoryName;
					$("#one_dlinfo").html(data.minElectricity);
					$("#two_dlinfo").html(data.maxElectricity );
					$("#one_wdinfo").html(data.minTemperature);
					$("#two_wdinfo").html(data.maxTemperature );
					/*
                      剩余电流：0~1000mA
                     温度：-25℃~100℃
                */
                   var minElectricity=0;
                   if(data.minElectricity!=null){
                   	     minElectricity=data.minElectricity;
                   }
                   var maxElectricity=0;
                   if(data.maxElectricity!=null){
                   	  maxElectricity=data.maxElectricity;
                   }
                   var electricityThresholdMin=0;
                   if(data.electricityThresholdMin!=null){
                   	electricityThresholdMin=data.electricityThresholdMin;
                   }
                   var electricityThresholdMax=0;
                   if(data.electricityThresholdMax!=null){
                       electricityThresholdMax=data.electricityThresholdMax;
                   }
                    //data.electricityThresholdMin,data.electricityThresholdMax
                    self.drawChart_electric("electricity_chart",data.minElectricity,data.maxElectricity,data.electricityThresholdMin,data.electricityThresholdMax,0,2000);
                     var minElectricity=0;
                   if(data.minElectricity!=null){
                   	     minElectricity=data.minElectricity;
                   }
                   var maxTemperature=0;
                   if(data.maxTemperature!=null){
                   	  maxTemperature=data.maxTemperature;
                   }
                   var temperatureThresholdMin=0;
                   if(data.temperatureThresholdMin!=null){
                   	temperatureThresholdMin=data.temperatureThresholdMin;
                   }
                   var temperatureThresholdMax=0;
                   if(data.temperatureThresholdMax!=null){
                       temperatureThresholdMax=data.temperatureThresholdMax;
                   }
                   //data.temperatureThresholdMin,data.temperatureThresholdMax
                    self.drawChart_electric("temperature_chart",data.minTemperature,data.maxTemperature,data.temperatureThresholdMin,data.temperatureThresholdMax,-25,100);
                }
				});
               
			},
    	drawChart_electric: function(chartId,valueMin, valueMax, thresholdMin, thresholdMax, min, max) {
				let self=this;
				// valueMin  = 100;
				// valueMax = 800;
				// thresholdMin = 130;
				// thresholdMax = 400;
               // let chartId="hasAnalogChart-clock-39";
				let color_bg = "rgba(225,225,225,0.5)";
    	        let color_green = "rgba(119,190,7,1)";
    	        let color_red = "rgba(254,102,104,1)";
				let colorArr = [];
				let dvalue = max - min;
				if (valueMin < min) {
					valueMin = min;
				}
				if (valueMax > max) {
					valueMax = max;
				}
				if (valueMin >= thresholdMin && valueMax <= thresholdMax) { //被包含
					colorArr.push([Math.abs((thresholdMin - min) / dvalue), color_bg]);
					colorArr.push([Math.abs((thresholdMax - min) / dvalue), color_green]);
				} else if (valueMax < thresholdMin) { //左边
					colorArr.push([Math.abs((valueMin - min) / dvalue), color_bg]);
					colorArr.push([Math.abs((valueMax - min) / dvalue), color_red]);
					colorArr.push([Math.abs((thresholdMin - min) / dvalue), color_bg]);
					colorArr.push([Math.abs((thresholdMax - min) / dvalue), color_green]);
				} else if (valueMin > thresholdMax) { //右边
					colorArr.push([Math.abs((thresholdMin - min) / dvalue), color_bg]);
					colorArr.push([Math.abs((thresholdMax - min) / dvalue), color_green]);
					colorArr.push([Math.abs((valueMin - thresholdMax) / dvalue), color_bg]);
					colorArr.push([Math.abs((valueMax - min) / dvalue), color_red]);
				} else if (valueMin <= thresholdMin && valueMax >= thresholdMax) { //包含
					colorArr.push([Math.abs((valueMin - min) / dvalue), color_bg]);
					colorArr.push([Math.abs((thresholdMin - min) / dvalue), color_red]);
					colorArr.push([Math.abs((thresholdMax - min) / dvalue), color_green]);
					colorArr.push([Math.abs((valueMax - min) / dvalue), color_red]);
				} else if (valueMin < thresholdMin && valueMax > thresholdMax) { //左连接
					colorArr.push([Math.abs((valueMin - min) / dvalue), color_bg]);
					colorArr.push([Math.abs((thresholdMin - min) / dvalue), color_red]);
					colorArr.push([Math.abs((thresholdMax - min) / dvalue), color_green]);
				} else if (valueMin > thresholdMin && valueMax > thresholdMax) { //右连接
					colorArr.push([Math.abs((thresholdMin - min) / dvalue), color_bg]);
					colorArr.push([Math.abs((thresholdMax - min) / dvalue), color_green]);
					colorArr.push([Math.abs((valueMax - min) / dvalue), color_red]);
				}
			
				colorArr.push([1, color_bg]);
				common.sortByKey(colorArr, '0');
				var option = {
					grid: {
						left: 0,
						right: 0,
						top: 0,
						bottom: 0
					},
					series: [{
						type: 'gauge',
						max: 1000,
						min: 0,
						startAngle: 210,
						endAngle: -30,
						pointer: false,
						title: false,
						detail: false,
						data: [0],
						splitLine: { //分割线样式（及10、20等长线样式）
							length: 12,
							lineStyle: { // 属性lineStyle控制线条样式
								width: 1,
								color: 'rgba(225,225,225,0.5)'
							}
						},
						axisTick: { //刻度线样式（及短线样式）
							length: 12,
							lineStyle: {
								width: 1,
								color: 'rgba(225,225,225,255)'
							}
						},
						axisLabel: { // 坐标轴小标记
							textStyle: { // 属性lineStyle控制线条样式
								fontWeight: 'bolder',
								fontSize: 12,
								color: 'rgba(255,255,255,0.5)'
							},
							distance: -32,
							formatter: function(value) {
								return "";
							}
						},
						axisLine: { // 坐标轴线  
							lineStyle: { // 属性lineStyle控制线条样式  
								color: colorArr,
								width: 13
							}
						},
					}]
				};
				if (option && typeof option === "object") {
					echarts.init(document.getElementById(chartId)).setOption(option, true);
				}
			}

		},
		on: {
			pageInit: function(e, page) {},
			pageAfterIn: function(e, page) {
				var self = this;
				// let valueMin=2;
				// let valueMax=50;
				// let thresholdMin=10;
				// let thresholdMax=50;
    //             let min=20;
    //             let max=50;
    //             let chartId="hasAnalogChart-clock-39";
				//self.drawChart_electric( 2, 50, 10, 50, 20, 50);
				self.electricalFire_org();
			}
		}

	}
</script>
